@charset "utf-8";

/* basic_fs.css - version 0.1 - Spry Pre-Release 1.7 */

/* Copyright (c) 2010. Adobe Systems Incorporated. All rights reserved. */


/* This is the rule for the top-level slide show element. By default, the width of this element is set to auto
 * so that the widget expands horizontally to fit its parent container. If you want to manuall y set the width of the * widget, set it on this element and all of its child elements, including the view port will adjust to fit the
 * specified width.
 *
 * In this particular design, the top-level element has a single pixel border around the entire widget. The
 * background color of this element will only show if the view port (aka ISSClip) has non-zero margins.
 */
.BasicSlideShowFS {
	width: auto;
	border: solid 1px #AAA;
	background-color: #FFF;
	position: relative;
	margin-top: 24px;
	padding-top: 10px; /* This should be the margin-top of .ISSClip but it is here to work around an IE6/IE7 collapsed margin bug. */
}

/* This rule controls the position of the slide show name. By default, it is anchored to the top left of the
 * slide show clip. The name actually renders outside of the widget so a margin-top on the widget's top-level
 * element (aka .BasicSlideShowFS) should be specified to give it space to render without overlapping any content
 * that comes before the widget.
 */
.BasicSlideShowFS .ISSName {
	position: absolute;
	left: 0;
	top: -24px;
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	text-transform: uppercase;
	color: #AAA;
}

/* This rule controls the position of the slide title. By default, it is anchored to the top right of the
 * slide show clip. The title actually renders outside of the widget so a margin-top on the widget's top-level
 * element (aka .BasicSlideShowFS) should be specified to give it space to render without overlapping any content
 * that comes before the widget.
 */
.BasicSlideShowFS .ISSSlideTitle {
	position: absolute;
	right: 0;
	top: -18px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	overflow: hidden;
	text-transform: none;
	color: #AAA;
}

/* This rule controls the size of the clip view (aka view port). The margins within this rule are used to push the
 * clip view away from the top, left and right edges of the widget and provide some spacing between it and the
 * film strip widget below it. If a background color is specified on the widget's top-level element, the margins
 * specified here will make it look like there is a frame around the clip view.
 *
 * The widget is position "relative" so that the slides inside it can be absolutely positioned relative to its upper
 * left corner for pan and zoom support.
 */
.BasicSlideShowFS .ISSClip {
	clear: both;
	width: auto;
	height: 432px;
	margin: 0 10px 10px 10px; /* margin-top is specified as padding on .BasicSlideShowFS to avoid an IE6/IE7 collapsed margin bug. */
	overflow: hidden;
	position: relative;
	border: solid 1px #AAA;
	background-color: #000
	;
}

/* This rule controls the size of the view that is inside the clip view. It should be exactly the same
 * size as the clip view for fading transitions.
 */
.BasicSlideShowFS .ISSView {
	width: 100%;
	height: 100%;
}

/* This rule controls the size of each slide. Note that the image that is displayed is *inside* of a
 * slide so they are not the same thing. For this particular design, a slide is the same size as the
 * clip and view.
 */
.BasicSlideShowFS .ISSSlide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
}

/* The slide show controls element is positioned over and sized to exactly match the height of the slide show's
 * clip view. Ideally, we would like the width of the controls element to be exactly the width of the clip view,
 * but since the clip view's width is determined by the widget's overall width, that number isn't available to us.
 * Since the controls element uses absolute positioning to accomplish the overlay, a width of 100% is specified
 * to prevent the element from collapsing horizontally. This means that the width of this element is exactly the
 * width of the content area of the widget's top-level elemtnt.
 *
 * The back, forward and play buttons are positioned relative to the slide show controls element so that the
 * size and position of the controls only needs to be changed in one place (this rule).
 */
.BasicSlideShowFS .ISSControls {
	position: absolute;
	top: 11px;
	left: 0;
	width: 100%;
	height: 432px;
}

/* We don't expose the first or last navigation buttons for this particular design,
 * so hide them with display none.
 */
.BasicSlideShowFS .ISSFirstButton, .BasicSlideShowFS .ISSLastButton {
	display: none;
}

/* The prev, next, and play buttons span the entire height of the controls element.
 * The width of each button will be set in rules that follow this one. By default,
 * we make each button entirely transparent, they will become visible as the user
 * hovers over them.
 *
 * A negative text indent is used to hide, off-screen, any text inside the buttons.
 */
.BasicSlideShowFS .ISSPreviousButton, .BasicSlideShowFS .ISSNextButton, .BasicSlideShowFS .ISSPlayButton {
	display: block;
	position: absolute;
	top: 0;
	height: 432px; /* We can't use 100% here because of IE6, so we set the height to be the same as SlideShowControls. */
	opacity: 0;
	filter: alpha(opacity=0);
	background-repeat: no-repeat;
	text-indent: -10000em;
}

/* The previous button is anchored to the left of the controls element and is about
 * 30% of the width of the controls element.
 */
.BasicSlideShowFS .ISSPreviousButton {
	left: 0;
	width: 30%;
	background-image: url(images/nav-left.png);
	background-position:  center;
}

.BasicSlideShowFS .ISSPreviousButtonDown {
	background-image: url(images/nav-left-active.png);
}

/* The next button is anchored to the right of the controls element and is about
 * 30% of the width of the controls element.
 */
.BasicSlideShowFS .ISSNextButton {
	right: 0;
	width: 30%;
	background-image: url(images/nav-right.png);
	background-position:  center;
}

.BasicSlideShowFS .ISSNextButtonDown {
	background-image: url(images/nav-right-active.png);
}

/* The play button spans the entire area of the controls element between
 * the prev and next buttons.
 */
.BasicSlideShowFS .ISSPlayButton {
	left: 30%;
	width: 40%;
	background-image: url(images/play.png);
	background-position:  center;
}

.BasicSlideShowFS .ISSPlayButtonDown {
	background-image: url(images/play-active.png);
}

/* If the user hovers over the prev, next or play button, change
 * its opacity so that it becomes visible.
 */
.BasicSlideShowFS .ISSPreviousButtonHover, .BasicSlideShowFS .ISSNextButtonHover, .BasicSlideShowFS .ISSPlayButtonHover {
	opacity: 0.75;
	filter: alpha(opacity=75);
}

/* If the slide show is busy, show the busy icon in the view.
 */
.BasicSlideShowFS.ISSBusy .ISSView {
	background-image: url(images/busy.gif);
	background-repeat: no-repeat;
	background-position: center;
	opacity: 0.5;
	filter: alpha(opacity=100);
}

/* If the slide show is playing, change the play button image to "pause".
 */
.BasicSlideShowFS.ISSPlaying .ISSPlayButton {
	background-image: url(images/pause.png);
}

.BasicSlideShowFS.ISSPlaying .ISSPlayButtonDown {
	background-image: url(images/pause-active.png);
}

/* Don't show the player controls if the slide show is busy!
*/
.BasicSlideShowFS.ISSBusy .ISSPreviousButton,
.BasicSlideShowFS.ISSBusy .ISSNextButton,
.BasicSlideShowFS.ISSBusy .ISSPlayButton
{
	display: none;
}

/* This rule controls the top-level film strip element that contains the thumbnails.
 */
.BasicSlideShowFS .FilmStrip {
	height: 80px;
	background-color: #CCC;
}

/* This rule controls the height and width of the previous and next buttons of the thumbnail filmstrip.
 */
.BasicSlideShowFS .FilmStripPreviousButton, .BasicSlideShowFS .FilmStripNextButton {
	display: block;
	width: 25px;
	height: 80px;
	background-repeat: no-repeat;
}

/* This rule positions the previous button on the left side of the film strip. The directional arrow
 * for the button is actually a centered bacground-image on the previous button element.
 */
.BasicSlideShowFS .FilmStripPreviousButton {
	float: left;
	background-image: url(images/arrow-left.png);
	background-position: right center;
}

/* This rule positions the next button on the right side of the film strip. The directional arrow
 * for the button is actually a centered bacground-image on the previous button element.
 */
.BasicSlideShowFS .FilmStripNextButton {
	float: right;
	background-image: url(images/arrow-right.png);
	background-position: left center;
}

/* This rule swaps out the previous button image when the user hovers over it.
 */
.BasicSlideShowFS .FilmStripPreviousButtonHover {
	background-image: url(images/arrow-left-hover.png);
}

/* This rule swaps out the next button image when the user hovers over it.
 */
.BasicSlideShowFS .FilmStripNextButtonHover {
	background-image: url(images/arrow-right-hover.png);
}

/* This rule swaps out the previous button image when the user clicks on it.
 */
.BasicSlideShowFS .FilmStripPreviousButtonDown {
	background-image: url(images/arrow-left-active.png);
}

/* This rule swaps out the next button image when the user clicks on it.
 */
.BasicSlideShowFS .FilmStripNextButtonDown {
	background-image: url(images/arrow-right-active.png);
}

/* This rule hides the previous and next buttons if they are marked as disabled.
 */
.BasicSlideShowFS .FilmStripPreviousButtonDisabled,
.BasicSlideShowFS .FilmStripNextButtonDisabled {
	visibility: hidden;
}

/* The FimStripTrack acts as a clip for the film strip. This rule simply gives it
 * dimensions and sets the overflow:hidden so it actually clips the content inside it.
 */
.BasicSlideShowFS .FilmStripTrack {
	overflow: hidden;
	width: auto;
	height: 80px;
	position: relative;
}

/* The FilmStripContainer holds all of the thumbnails. It is what gets positioned to give the
 * illusion that things are sliding around. It is initially set to a very wide width so that
 * thumbnails inside it don't wrap vertically.
 */
.BasicSlideShowFS .FilmStripContainer {
	width: 10000em;
	height: 80px;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
}

/* Each film strip panel acts as a container for the thumbnail and its frame.
 * The panel's height is exactly the height of the film strip track, and its
 * width is automatically adjusted/determined by the size of the thumbnail and
 * its frame.
 *
 * A left padding is used to set the spacing between the first thumbnail frame
 * and the left edge of the film strip view, as well as the spacing between
 * the thumbnail frames. The spacing *BETWEEN* the thumbnail frames can be adjusted
 * by setting the right margin of the panel. To bring the thumbs closer, use a
 * negative margin, to space them out more, use a positive margin.
 */
.BasicSlideShowFS .FilmStripPanel {
	float: left;
	height: 80px;
	padding-left: 10px;  /* Spacing on the left of the thumbs */
	margin-right: 0;     /* Adjusted spacing *between* thumbs */
}

/* The slide show link that is inside each film strip panel needs to be 2 or 3 sliced.
 * The link itself serves as the frame for the thumbnail. The border for the link is the
 * outer border, the border around the frame, and the background color serves as the color
 * of the frame. A top margin is used to center the thumbnail frame veritcally within the
 * film strip track/view.
 */
.BasicSlideShowFS .FilmStripPanel .ISSSlideLink {
	float: left;
	display: block;
	margin-top: 10px;
	border: solid 1px #AAA;
	background-color: #FFF;
}

/* The span inside the link provides the inner border of the thumbnail frame. The inner border
 * is used to provide some definition of where the thumbnail image ends, and the thumbnail frame
 * begins.
 *
 * The margin for this span provides the frame thickness.
 */
.BasicSlideShowFS .FilmStripPanel .ISSSlideLinkRight {
	display: block;
	border: solid 1px #AAA;
	width: 56px;
	height: 47px;
	margin: 4px;
	text-indent: -1000em;
	background-position: center;
}

.BasicSlideShowFS .FilmStripPanel .ISSSlideLinkCenter {
	display: block;
	width: 100%;
	height: 100%;
}

/* This rule adjusts the color of the thumbnail frame's outer border and frame for
 * the currently selected thumbnail.
 */
 
.BasicSlideShowFS .FilmStripCurrentPanel .ISSSlideLink {
	background-color: #FFF;
	border: solid 1px #F00;
}